<template>
    <div class="app-container">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>

        <!-- 添加框 -->
        <el-button type="text" @click="dialogVisible = true; subject.parentid == '0'">点击添加一级标题</el-button>
        <el-dialog title="分类标题" :visible.sync="dialogVisible">
            <el-form :model="subject">
                <el-form-item label="请输入标题">
                    <el-input v-model="subject.title"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubject">确 定</el-button>
            </span>
        </el-dialog>

        <el-tree class="filter-tree" :data="subjectList" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" ref="tree" :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                    <el-button type="text" size="mini" @click="dialogVisible = true; subject.parentid = data.id"
                        v-if="node.level == 1">
                        添加
                    </el-button>
                    <el-button type="text" size="mini" @click="deleteSubject(node, data)">
                        删除
                    </el-button>
                </span>
            </span>
        </el-tree>
    </div>
</template>
<script>
import subjectApi from "../../api/subject";
export default {
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },

    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1;
        },
        init() {
            subjectApi
                .getList()
                .then((res) => {
                    this.subjectList = res.data;
                })
                .catch((err) => {
                    this.$message({
                        type: "error",
                        message: "获取失败!",
                    });
                });
        },
        // 添加课程分类
        addSubject() {
            // 调用添加课程分类的api
            subjectApi.addSubject(this.subject).then(res => {
                // 添加成功  提示信息
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                })
                // 关闭课程分类对话框
                this.dialogVisible = false
                // 重新载入课程分类列表
                this.init()
                // 清空添加框内的信息
                this.subject.title = ""
            }).catch(err => {
                this.$message({
                    type: "error",
                    message: "添加失败!",
                });
            })
        },
        // 删除课程分类
        deleteSubject(node, data) {
            // 询问是否要删除该课程分类
            this.$confirm('您确定要删除该课程分类吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(res => {
                // 调用删除api
                subjectApi.deleteSubject(data.id).then(res => {
                    // 删除成功提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    // 重新加载数据
                    this.init()
                }).catch(err => {
                    this.$message({
                        type: "error",
                        message: "删除失败!",
                    });
                })
            })
        }
    },

    data() {
        return {
            subject: {
                parentid: '0'
            },
            dialogVisible: false,
            filterText: "",
            subjectList: [],
            defaultProps: {
                children: "children",
                label: "title",
            },
        };
    },
    created() {
        // 获取课程分类列表信息
        this.init();
    },
};
</script>